<template>
  <div
    class="w750"
    :class="[
      fightlistArr && fightlistArr.length != 0 ? '' : 'white-bg',
      themes.theme,
    ]"
  >
    <div class="fight">
      <div class="banner" v-if="fightbanner && fightbanner.length">
        <van-swipe
          :autoplay="3000"
          indicator-color="#4eae31"
          :show-indicators="
            fightbanner && fightbanner.length > 1 ? true : false
          "
        >
          <van-swipe-item v-for="(image, index) in fightbanner" :key="index">
            <div class="needsclick" @click="enterGoods(image)">
              <img :src="$staticServer + image" alt="" />
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="fight-tit">拼团专区</div>
      <van-list
        v-model="paging.loading"
        :finished="paging.finished"
        :finished-text="!paging.emptylist ? '没有更多了' : ''"
        @load="onLoad"
        :immediate-check="false"
        :error.sync="paging.error"
        v-if="paging.tab"
        error-text="请求失败，点击重新加载"
      >
        <div class="ser-list">
          <div
            class="search-con"
            v-for="(item, index) in fightlistArr"
            :key="index"
            @click="goFightDet(item.id)"
          >
            <span class="pro-mes">
              <div class="pro-img">
                <legend-image :pic="item.pic" :isJD="item.prodSource == 'JD'" :options="{ w: '180', h: '180' }" :class="'needsclick'" />
              </div>
              <div class="pro-name">
                <div class="name">
                  <i class="act-tag">{{ item.peopleNumber }}人团</i
                  >{{ item.mergeName }}
                </div>
                <div class="pro-price">
                  <div class="price-box">
                    <span class="price">￥<em class="now">{{ Money(item.minPrice)[0] }}</em>.{{ Money(item.minPrice)[1] }}</span>
                    <span class="old-price" style="font-size:11px;">原价￥{{ Money(item.minProdPrice)[0] }}.{{ Money(item.minProdPrice)[1]}}</span>
                  </div>
                  <span class="fight-num" v-if="item.count">已拼{{ item.count }}团</span>
                </div>
              </div>
              <span class="build-fight">去开团</span>
            </span>
          </div>
        </div>
      </van-list>
    </div>
    <Noempty
      :pic="require('../../assets/images/order-empty.png')"
      :title="'暂无拼团相关'"
      v-if="paging.emptylist && !paging.error"
    />
  </div>
</template>

<script>
import { Swipe, SwipeItem } from "vant";
import cash from "utils/tool";
import { mapState } from "vuex";
import Noempty from "components/Noempty/Noempty";
import legendImage from "components/legendImage/legendImage";
import { fightbanners, fightLists } from "api/fight";
import PageUtil from "utils/PageUtil";
const pageUtil = new PageUtil(fightLists, {
  field: {
    list: "fightlistArr",
  },
});
export default {
  data() {
    return {
      Money: cash, //价格转换
      fightbanner: ['static/images/shop-bg.jpg'], //广告图
      fightlistArr: [], //列表数据
      Nomsg: false,
      paging: {
        tab: false,
        loading: false,
        finished: false,
        error: false, // 是否错误
        emptylist: false, // 是否显示列表为空时的样式
      },
    };
  },
  created() {},
  mounted() {
    let that = this;

    //获取广告banner
    //    this.loadfightBanners()

    //获取拼团相关的列表数据
    pageUtil.loadListByPage(that);
  },
  methods: {
    goFightDet(id) {
      this.$router.push({
        path: `/fightDetail`,
        query: {
          id: id,
        },
      });
    },
    onLoad() {
      pageUtil.loadListByPageMore();
    },

    enterGoods(image) {
      let url = image.url;
      if (!url) {
        return;
      }

      if (url.indexOf("http") != -1 || url.indexOf("https") != -1) {
        window.location.href = url;
      } else {
        this.$router.push({
          path: url,
        });
      }
    },
  },
  computed: {
    ...mapState(["themes"]),
  },
  components: {
    Noempty,
    legendImage,
  },
};
</script>

<style src="../../assets/css/style/fight-style.css" scoped></style>
<style src="../../assets/css/style/list-style.css" scoped></style>
<style src="../../assets/css/search.css" scoped></style>
<style src="../../assets/css/fight.css" scoped></style>
<style scoped>
.van-swipe-item img {
  width: 100%;
  height: 100%;
}
</style>
